<template>
	<view>
		<view class="sctp">
			<view class="wenz">
				我们想听听您的心声，
				式，我们期待与您的真诚沟通。
				<text>最多上传四张</text>
			</view>
			<view class="textarea_box">
				<textarea class="textarea" placeholder="请输入您宝贵的意见" maxlength="200" @input="descInput" v-model="desc" />
				<view class="num">{{ desc.length }}/200</view>
			</view>
			<!-- <view class="sctp_img">
		     <image  src="../../../static/images/a11.png" mode=""></image>
		    </view> -->
			<view class="add-img-box">
				<view class="add-img-item" v-for="(item, index) in imgList" :key="index">
					<image class="add-img" @click="imgInfo(index)" :src="item.path" mode="aspectFill"></image>
					<image class="add-img-del" @click="delImg(index)" mode="widthFix" src="../../../static/images/a14.png"></image>
				</view>
				<view v-if="imgList.length < 4 " class="add-img-item" @click="openCamera">
					<image class="add-img" src="../../../static/images/s60.png"></image>
				</view>
			</view>
		</view>
	
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [],
				cloudimgList: [],
				imgCount: 4, //最多支持9张上传，可以修改
				img:[],
				desc: '', //监听文本域的字数
			}
		},
		onNavigationBarButtonTap : function (e) {
		   console.log(this.img)
		 this.$ajax(
		 this.apiList.opinion,
		 {
			 image:this.img.toString(),
			 content:this.desc
		 },
		'POST',
		 ).then(res=>{
			 this.$sToast(res.msg)
			 uni.switchTab({
			 	url:'../user'
			 })
			 // console.log(res)
		 })
		},
		methods: {
			descInput(e) {
				this.remnant = e.detail.value.length;
			},
			receipt() {
				uni.showModal({
					content: '提交成功，请耐心等候',
					showCancel: false,
					buttonText: '确定',
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						}
					}
				})
			},
			imgInfo(i) {
				let tempList = [];
				this.imgList.forEach(img => {
					tempList.push(img.path);
				});
				console.log(tempList);
				//显示图片
				uni.previewImage({
					current: i,
					loop: false,
					urls: tempList,
					indicator: 'default'
				});
			},
			delImg(i) {
				uni.showModal({
					content: '确定删除这张吗',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(i, 1);
							this.imgCount++;
						} else if (res.cancel) {

						}
					}
				});
			},
			delcloudImg(i) {
				var _self = this;
				uni.showModal({
					content: '确定删除云服务器上面这张图吗',
					success: res => {
						if (res.confirm) {
							this.$cloud.deleteFile({
								fileList: [this.cloudimgList[i]],
								success(res) {},
								fail(err) {
									console.log(err);
								},
								complete(res) {
									uni.showToast({
										title: '删除成功！',
										icon: 'none'
									});
									_self.cloudimgList.splice(i, 1);
								}
							});
						} else if (res.cancel) {

						}
					}
				});
			},
			urlTobase64(url) {
				var that = this
				var toBase64Url;
				uni.request({
					url: url,
					method: 'GET',
					responseType: 'arraybuffer',
					success: async res => {
						let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
						toBase64Url = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
						let  imas = []
						imas.push(toBase64Url)
						this.$ajax(
							this.apiList.shang, {
								img: imas.toString()
							},
							'POST',
						).then(res => {
							if (res.code) {
								this.img.push(res.data) 
							}
						})
					}
				});
			},


			openCamera() {
				uni.chooseImage({
					// sourceType: ['camera'],
					count: this.imgCount,
					sizeType: ['compressed'],
					success: e => {
						this.imgList = [...this.imgList, ...e.tempFiles];
						this.imgCount = 9 - this.imgList.length;
						console.log('imgCount', this.imgCount);
						for(var i = 0; i< this.imgList.length; i++){
								this.urlTobase64(this.imgList[i].path)
						}
					}
				});
			},

		}

	}
</script>

<style lang="scss" scoped>
	.sctp {
		padding: 20rpx;

		.wenz {
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(189, 189, 189, 1);
		}

		.add-img-box {
			display: flex;
			align-items: center;
			position: relative;

			.add-img-del {
				width: 30upx;
				position: absolute;
				top: 0;
				left: 80upx;
			}
		}

		image {
			width: 100rpx;
			height: 100rpx;
			padding-top: 20rpx;
			margin-left: 20rpx;
		}

		text {
			display: block;
			font-size: 20rpx;
			color: #BDBDBD;
		}
	
	
	}
	.textarea_box{
		background: #F5F5F5;
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 15rpx;
		height: 200rpx;
		textarea{
			font-size: 20rpx;
			height: 200rpx;
			color: #BDBDBD;
		}
		.num{
			font-size: 20rpx;
			color: #BDBDBD;
			text-align: right;
			margin-top: -20rpx;
		}
	}
		
</style>
